<template>
  <div class="common-layout">
    <el-container>
      <el-header class="title" >
        <el-row :gutter="20">
          <el-col :span="1"><el-icon @click="logo()"><operation /></el-icon></el-col>
          <el-col :span="20" class="bgimg"> <img src="../../assets/images/logo1.png" style="width:300px" alt=""></el-col>
           <el-col :span="3">
              <el-collapse>
              <el-collapse-item :title="user.name">
                <el-col>
                  <el-avatar :size="60" :src="user.avatar"/>
                </el-col>
                 <el-col>
                  <el-button type="primary"  size="small" plain @click="logout()">注销</el-button>
                </el-col>
              </el-collapse-item>
             </el-collapse>
           </el-col>
          <!-- <el-col :span="2"><el-button type="primary" plain @click="logout()">注销</el-button></el-col> -->
        </el-row>
        </el-header>
      <el-container>
        <el-aside width="200px"
          ><navigation :flags="flags" @click-data="clickdata"></navigation
        ></el-aside>
        <el-main>
          <div>
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="mx-1"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
              @click="handClick(tag)"
              size="large"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="ml-1 w-20"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
          </div>
          <router-view v-if="isRouterAlive"/></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, reactive, Ref, computed, watch, provide} from "vue";
import navigation from "../../components/navigation/Navigation.vue";
import { Operation } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import type { ElInput } from "element-plus";
import router from "../../router";

export default{
  components: {
    navigation,
    Operation,
  },
  setup() {
    const isRouterAlive=ref(true);
    const reload=()=>{
      isRouterAlive.value=false
      nextTick(()=>{
        isRouterAlive.value=true;
      })
    }
    const store = useStore(); //vuex仓库
    const user=computed(()=>{
       return store.state.user.userInfo
    })
    provide('reload',reload)
    //定义变量接收子组件传递的值
    let Arrydata = reactive({
      id: "",
      icon: "",
      title: "",
      router: "",
      Subclass: [],
    });
    let flags = ref(false);
    const logo = () => {
      flags.value = !flags.value;
    };
    const clickdata = (data: any) => {
      Arrydata = data;
      Removeduplication(Arrydata.title, dynamicTags,Arrydata.router,dynamicTagrouter);
    };
    //去除重复
    const Removeduplication = (a: string, b: Ref<string[]>,c: string,d: Ref<string[]>) => {
       let flag;
      for(let i=0;i<b.value.length+1;i++){
       flag=b.value.indexOf(a);
      }
      if(flag==-1){
        b.value.push(a);
        d.value.push(c)
      }
    }
    //tag
    const inputValue = ref("");
    let dynamicTags= ref(new Array<string>());
    let dynamicTagrouter= ref(new Array<string>());
    const inputVisible = ref(false);
    const InputRef = ref<InstanceType<typeof ElInput>>();

    const handleClose = (tag: string) => {
      dynamicTagrouter.value.splice(dynamicTags.value.indexOf(tag), 1);
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
      router.push(dynamicTagrouter.value[dynamicTags.value.length-1]);
       console.log(dynamicTagrouter.value.length)
    };
    watch(()=>router,()=>{
       console.log(router)
    })
    const showInput = () => {
      inputVisible.value = true;
      nextTick(() => {
        InputRef.value!.input!.focus();
      });
    };

    const handleInputConfirm = () => {
      if (inputValue.value) {
        dynamicTags.value.push(inputValue.value);
      }
      inputVisible.value = false;
      inputValue.value = "";
    };
    //tag 点击
    const handClick=(tag:any)=>{
     
      for(let i=0;i<dynamicTags.value.length;i++){
          if(dynamicTags.value[i]==tag)
            {
               router.push(dynamicTagrouter.value[i])
            }
      }    

    }
    const logout=()=>{
         sessionStorage.clear()
         router.push("/login");
      }
      return {
        logout,
      navigation,
      Operation,
      logo,
      flags,
      clickdata,
      Arrydata,
      handleClose,
      showInput,
      handleInputConfirm,
      inputVisible,
      dynamicTags,
      handClick,
      isRouterAlive,
      user
    };
  },
};
</script>
<style>
.title {
  font-size: 2rem;
  border-bottom: 1px solid #dedfe0;
  padding-top: 10px;
  height: 80px;
}
.logo {
  margin: 20px 20px 0 0;
}
.el-tag--large{
  margin-right: 10px;
}
/* .bgimg{
  height: 50px;
  line-height: 50px;
} */
.bgimg img{
  height: 80px;
  line-height: 80px;
  padding: 0;
}
</style>
